<template>
  <el-dialog v-model="dialogVisible" title="订单详情">
    <el-form :model="content" label-width="120px">
      <h3>订单状态</h3>
      <el-form-item label="订单状态:">
        <span>{{ OrderStatusEnumText[content.orderStatus as OrderStatusEnum] }}</span>
      </el-form-item>
      <el-form-item label="退款状态:" v-if="content.refundStatus != null">
        <span>{{ RefundStatusEnumText[content.refundStatus as RefundStatusEnum] }}</span>
      </el-form-item>
      <el-form-item label="开票状态:" v-if="content.applyOrderInvoice === 'Y'">
        <span>{{ InvoiceStatusEnumText[content.refundStatus as InvoiceStatusEnum] }}</span>
      </el-form-item>
      <h3>场地信息</h3>
      <el-form-item label="预定场地:">
        <span>{{ content.venueName }} - {{ content.siteName }}</span>
      </el-form-item>
      <el-form-item label="预定日期:">
        <span>{{ formatDate(new Date(content.orderDate), "YYYY-mm-dd") }}</span>
      </el-form-item>
      <el-form-item label="预定时间:">
        <span>{{ content.orderStartTime }} - {{ content.orderEndTime }}</span>
      </el-form-item>
      <h3>预订人信息</h3>
      <el-form-item label="预订人:">
        <span>{{ content.orderUserName }}</span>
      </el-form-item>
      <el-form-item label="联系方式:">
        <span>{{ content.phoneNumber }}</span>
      </el-form-item>
      <el-form-item label="踢球人数:">
        <span>{{ content.peopleCount === null ? '--' : content.peopleCount }}</span>
      </el-form-item>
      <el-form-item label="队伍名称:">
        <span>{{ content.teamName === null ? '--' : content.teamName }}</span>
      </el-form-item>
      <el-form-item label="订单创建时间:">
        <span>{{
          formatDate(new Date(content.createdDate), "YYYY-mm-dd HH:MM:SS")
        }}</span>
      </el-form-item>
      <el-form-item label="订单编号:">
        <span>{{ content.orderNumber }}</span>
      </el-form-item>
      <el-form-item label="订单金额:">
        <span>{{ content.transactionAmount }}元</span>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { formatDate } from "@/utils/formatTime";
import { OrderStatusEnum, RefundStatusEnum, InvoiceStatusEnum } from "@/views/area/config/enum";
import { OrderStatusEnumText, RefundStatusEnumText, InvoiceStatusEnumText } from "@/views/area/config/index";


const props = defineProps(["content"]);
const dialogVisible = ref(false);

defineExpose({
  dialogVisible,
});
</script>
<style lang="scss" scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
